<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Schulte Grid</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .grid {
            display: none;
            grid-template-columns: repeat(10, 1fr);
            gap: 2px;
            margin: 20px 0;
            background-color: #fff;
            padding: 3px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .number {
            background-color: #f8f9fa;
            border: 2px solid #dee2e6;
            padding: 0;
            text-align: center;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡 */
            font-size: 1.8em;
            font-weight: bold;
            color: #333;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            min-height: 60px;
        }
		.number.clicked {
			background-color: #888888 !important;  /* 深灰色背景 */
			border-color: #616161 !important;     /* 稍浅的灰色边框 */
			color: rgba(255, 255, 255, 0.5) !important; /* 半透明白色文字 */
			cursor: not-allowed;
			transition: all 0.3s ease;            /* 添加颜色过渡效果 */
		}
        .number.error {
            background-color: rgba(255, 107, 107, 0.9) !important; /* 带透明度 */
            border-color: rgba(250, 82, 82, 0.9) !important;
            color: white;
            animation: errorFade 1.2s forwards; /* 渐隐动画 */
        }
        @keyframes errorFade {
            0% { 
                background-color: rgba(255, 107, 107, 0.9);
                border-color: rgba(250, 82, 82, 0.9);
            }
            100% { 
                background-color: #f8f9fa;
                border-color: #dee2e6;
            }
        }
        .status {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        #history {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: white;
        }
        button {
            padding: 12px 24px;
            margin: 5px;
            cursor: pointer;
            background: #4dabf7;
            border: none;
            border-radius: 5px;
            color: white;
            transition: all 0.2s;
            font-size: 1em;
        }
        button:hover {
            background: #228be6;
        }
        #timer {
            font-family: 'Courier New', monospace;
            color: #495057;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div class="status">
        <div>Current Number: <span id="current">00</span></div>
        <div>Cost Time: <span id="timer">00:00:00</span></div>
    </div>
    
    <button onclick="startGame()">Start</button>
    <button onclick="endGame()">End</button>
    
    <div class="grid" id="grid"></div>
    
    <div id="history">
        <h3 style="margin: 0 0 10px 0; color: #495057;">History</h3>
        <ul id="historyList" style="padding-left: 20px;"></ul>
    </div>

    <script>
        let currentNumber = 0;
        let startTime;
        let timerInterval;
        let errorCount = 0;
        const numbers = Array.from({length: 100}, (_, i) => i.toString().padStart(2, '0'));

		function createGrid() {
			const grid = document.getElementById('grid');
			grid.style.display = 'grid';
			grid.innerHTML = '';
			
			// 改进的Fisher-Yates洗牌算法
			const shuffled = [...numbers];
			for (let i = shuffled.length - 1; i > 0; i--) {
				const j = Math.floor(Math.random() * (i + 1));
				[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
			}
			
			shuffled.forEach(num => {
				const div = document.createElement('div');
				div.className = 'number';
				div.textContent = num;
				div.onclick = (e) => checkNumber(num, e);
				grid.appendChild(div);
			});
		}

        function checkNumber(clickedNum, e) {
            if (!startTime) return;
			if (e.target.classList.contains('clicked')) {
				return;
			}
            
            const target = currentNumber.toString().padStart(2, '0');
            if (clickedNum === target) {
                currentNumber++;
                document.getElementById('current').textContent = 
                    currentNumber.toString().padStart(2, '0');
                e.target.classList.add('clicked');
                
                if (currentNumber === 100) {
                    endGame();
                }
            } else {
                errorCount++;
                // 添加error类触发动画
                e.target.classList.add('error');
                // 动画结束后自动移除error类
                setTimeout(() => {
                    e.target.classList.remove('error');
                }, 1200);
            }
        }

        function startGame() {
            if (!startTime) {
                alert("Game Start. Click each number starting from 00 up to 99.");
                errorCount = 0;
                createGrid();
                startTime = Date.now();
                timerInterval = setInterval(updateTimer, 10);
            }
        }

        function updateTimer() {
            const elapsed = Date.now() - startTime;
            const ms = Math.floor(elapsed % 1000 / 10);
            const seconds = Math.floor(elapsed / 1000 % 60);
            const minutes = Math.floor(elapsed / 1000 / 60);
            document.getElementById('timer').textContent = 
                `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${ms.toString().padStart(2, '0')}`;
        }

        function endGame() {
            clearInterval(timerInterval);
            const grid = document.getElementById('grid');
            grid.style.display = 'none';
            
            if (currentNumber === 100) {
                const time = document.getElementById('timer').textContent;
                const listItem = document.createElement('li');
                listItem.textContent = `Finish time: ${time}，wrong click count: ${errorCount}`;
                document.getElementById('historyList').prepend(listItem);
                alert(`Game Completed！\nCost time: ${time}\nWrong clicked count: ${errorCount}`);
            }
            
            startTime = null;
            currentNumber = 0;
            errorCount = 0;
            document.getElementById('current').textContent = '00';
            document.getElementById('timer').textContent = '00:00:00';
        }

        // 初始化隐藏网格
        document.getElementById('grid').style.display = 'none';
    </script>
</body>
</html>